import React, { JSX } from 'react';
import { NulCommonOperations, NulDialog, NulFormItem } from '../../components/NulDialog';
import { TextField } from '@mui/material';
import { useAppDispatch } from '../../actions/hooks';
import { upgradeMembership } from '../../actions/PersonalInformation';

interface UpgradeMembershipDialogProps {
  open: boolean;
  onClose: () => void;
};

function UpgradeMembershipDialog(props: UpgradeMembershipDialogProps): JSX.Element {
  const { open, onClose } = props;

  const dispatch = useAppDispatch();

  const [inviteCode, setInviteCode] = React.useState<string>('');

  const clear = () => {
    setInviteCode('');
  };

  const onConfirmClicked = () => {
    dispatch(upgradeMembership({ inviteCode: inviteCode }));
    clear();
    onClose();
  };

  return (
    <NulDialog
      open={open}
      onClose={onClose}
      title='Upgrade Membership'
      operations={
        <NulCommonOperations
          onPositiveClicked={onConfirmClicked}
          onNegativeClicked={() => {
            clear();
            onClose();
          }}
        />
      }
    >
      <NulFormItem hint='Invite Code' component={
        <TextField placeholder='Retype Invite Code' fullWidth size='small'
          value={inviteCode}
          onChange={(event) => { setInviteCode(event.target.value); }}
        />
      } />
    </NulDialog>
  );
}

export default UpgradeMembershipDialog;